<template>
    <div class="update-win">
        <template v-if="!showDownload">
            <div class="title">
                发现新版本
                <small v-if="remoteVersionFromApp"
                    >v{{ remoteVersionFromApp }}</small
                >
            </div>
            <div class="content">
                <div
                    class="fixed"
                    v-if="updateContent"
                    v-html="updateContent"
                ></div>
                <ul class="fixed" v-else>
                    <li>1.提升了客户端的启动速度</li>
                    <li>2.解决了已知的BUG</li>
                </ul>
                <div class="verson">
                    <span>当前版本: v{{ localVersion }}</span>
                    <span class="more" @click="goRoute">
                        更多
                        <a-icon type="right"></a-icon>
                    </span>
                </div>
                <div class="content-footer">
                    <div class="download-btn cancel" @click="close"
                        >暂不更新</div
                    >
                    <div class="download-btn" @click="download">立即下载</div>
                </div>
            </div>
        </template>
        <div class="download-wrapper" v-else>
            <div class="download-title" v-if="is_paused">暂停中</div>
            <div class="download-title" v-else>正在下载...</div>
            <div class="progress-bar">
                <a-progress size="small" :percent="state.percent" />
            </div>
            <div class="state" v-if="state.size">
                <div class="size">
                    <span>{{ state.size.transferred | normalSize }}</span>
                    <span>/</span>
                    <span>{{ state.size.total | normalSize }}</span>
                </div>
                <div class="speed" v-if="state.speed"
                    >{{ state.speed | normalSize("K") }}/s</div
                >
            </div>
            <div class="actions">
                <span @click="resume" v-if="is_paused"
                    ><a-icon type="caret-right"></a-icon> 继续</span
                >
                <span @click="pause" v-else
                    ><a-icon type="pause"></a-icon> 暂停</span
                >
                <span @click="abort"><a-icon type="close"></a-icon> 取消</span>
            </div>
        </div>
        <a-icon type="close" class="close" @click="close"></a-icon>
        <a-icon type="minus" class="hide" @click="hide" />
    </div>
</template>

<script>
import { remote } from "electron";
import { mapState } from "vuex";

const fs = require("fs");
const path = require("path");
const request = require("request");
const progress = require("request-progress");
const showdown = require("showdown");

const getDownloadInfo = function (version) {
    const BASE_URL =
        "https://github.com/xiaozhu188/electron-vue-cloud-music/releases/download";
    if (process.platform === "win32") {
        return {
            filename: `electron-vue-cloud-music-setup-${version}.exe`,
            url: `${BASE_URL}/v${version}/electron-vue-cloud-music-setup-${version}.exe`,
        };
    } else if (process.platform === "linux") {
        return {
            filename: `${BASE_URL}/v${version}/electron-vue-cloud-music-${version}-x86_64.AppImage`,
            url: `${BASE_URL}/v${version}/electron-vue-cloud-music-${version}-x86_64.AppImage`,
        };
    } else {
        return {
            filename: `electron-vue-cloud-music-${version}.dmg`,
            url: `${BASE_URL}/v${version}/electron-vue-cloud-music-${version}.dmg`,
        };
    }
};
export default {
    data() {
        return {
            localVersion: remote.app.getVersion(),
            showDownload: false,
            state: {},
            $request: null,
            is_paused: false,
            is_abort: false,
            remoteVersionFromApp: this.$electron.remote.getGlobal(
                "remoteVersion"
            ),
        };
    },
    computed: {
        ...mapState("Update", ["updateContent"]),
    },
    methods: {
        hide() {
            this.$electron.ipcRenderer.send("toggle-updatewin");
        },
        close() {
            this.$electron.ipcRenderer.send("close-updatewin");
        },
        goRoute() {
            remote.shell.openExternal(
                "https://github.com/xiaozhu188/electron-vue-cloud-music/releases"
            );
        },
        download() {
            remote.dialog.showOpenDialog(
                {
                    title: "选择保存路径",
                    defaultPath: remote.app.getPath("home"),
                    properties: ["openDirectory"],
                },
                (dir) => {
                    if (dir) {
                        if (!dir && !dir.length) {
                            this.showDownload = false;
                            return;
                        }
                        this.showDownload = true;
                        let saveDir = dir[0];
                        let { filename, url } = getDownloadInfo(
                            this.remoteVersionFromApp
                        );
                        console.log(filename, url);
                        // const downloadUrl = url
                        const downloadUrl = url;
                        const $request = request(downloadUrl);
                        // console.log($request)
                        const _progress = progress($request, {
                            throttle: 1000,
                        })
                            .on("progress", (state) => {
                                this.handleProgress(state);
                            })
                            .on("error", (err) => {
                                this.handleErr(err);
                            })
                            .on("end", () => {
                                if (this.is_abort) return; // 取消下载会触发end
                                this.state.percent = 100;
                                this.$electron.ipcRenderer.send(
                                    "quit-and-open",
                                    path.join(saveDir, filename)
                                );
                            })
                            .pipe(
                                fs.createWriteStream(
                                    path.join(saveDir, filename)
                                )
                            );

                        this.$request = $request;
                    }
                }
            );
        },
        handleErr(err) {
            this.showDownload = false;
            let networkNotification = new Notification("网易云音乐", {
                title: "网易云音乐",
                body: "下载失败:" + err,
                icon: "images/icon.ico",
            });
        },
        handleProgress(state) {
            console.log(state);
            state.percent = Number(Math.round(state.percent * 100));
            this.state = state;
        },
        pause() {
            this.is_paused = true;
            this.$request.pause();
        },
        resume() {
            this.is_paused = false;
            this.$request.resume();
        },
        abort() {
            this.state = {};
            this.showDownload = false;
            this.is_abort = true;
            this.$request.abort();
        },
    },
};
</script>

<style lang="less" scoped>
.update-win {
    background: #f8f8f8 url("./../../assets/images/loginBg.jpg") top
        center/contain no-repeat;
    width: 330px;
    height: 410px;
    border-radius: 15px;
    padding-top: 180px;
    border: 1px solid #ddd;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 5px;
    top: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .close {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 11;
        font-size: 18px;
        color: rgba(0, 0, 0, 0.5);

        &:hover {
            color: rgba(0, 0, 0, 1);
            cursor: pointer;
        }
    }

    .hide {
        position: absolute;
        top: 15px;
        right: 45px;
        z-index: 11;
        font-size: 18px;
        color: rgba(0, 0, 0, 0.5);

        &:hover {
            color: rgba(0, 0, 0, 1);
            cursor: pointer;
        }
    }

    .fixed {
        color: rgba(0, 0, 0, 0.7);

        li {
            line-height: 28px;
        }
    }

    .title,
    .fixed {
        -webkit-app-region: drag;
    }

    .title {
        margin-bottom: 10px;
        text-align: center;
        font-weight: 600;
        font-size: 16px;
        color: rgba(0, 0, 0, 1);
    }

    .content {
        width: 70%;
        margin: 0 auto;
        overflow: auto;
        .verson {
            display: flex;
            justify-content: space-between;
            color: rgba(0, 0, 0, 0.4);
            font-size: 12px;

            .more {
                -webkit-app-region: no-drag;
                color: rgba(0, 0, 0, 0.5);

                &:hover {
                    color: rgba(0, 0, 0, 1);
                    cursor: pointer;
                }
            }
        }

        .content-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .download-btn {
                width: 47%;
                margin-top: 20px;
                line-height: 34px;
                border-radius: 18px;
                background: linear-gradient(to right, #c72828, #ff2c2c);
                color: #fff;
                font-size: 14px;
                text-align: center;
                font-weight: 600;

                &:hover {
                    opacity: 0.9;
                    cursor: pointer;
                }

                &.cancel {
                    color: #333;
                    background: none;
                    border: 1px solid #ddd;
                }
            }
        }
    }

    .download-wrapper {
        -webkit-app-region: drag;
        margin: 20px;
        width: 80%;
        margin: auto;

        .progress-bar {
            margin: 2px 0;
            -webkit-app-region: no-drag;

            /deep/ .ant-progress-bg {
                background-image: linear-gradient(
                    to right,
                    #52acff 0,
                    #006fd6 100%
                );
            }

            /deep/ .ant-progress-inner {
                background: #e8e8e8;
            }
        }

        .download-title {
            font-size: 14px;
            line-height: 1;
        }

        .state {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11px;
            color: rgba(0, 0, 0.5);
        }

        .actions {
            text-align: center;
            margin-top: 20px;
            -webkit-app-region: no-drag;

            span {
                &:hover {
                    color: rgba(0, 0, 0.9);
                    cursor: pointer;
                }
            }
        }
    }
}
</style>
